<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<title>celebrity艺人主页</title>
	<link rel="stylesheet" href="css/celebrity艺人主页.css">
</head>

<body>
	<div class="celebrity-all">
		<!-- 顶部 -->
		<div class="celebrity-tittle">
			<ul>
				<li>
					<img src="./img/celebrity-title1.png" alt="">
				</li>
				<li>
					<p>薛之谦</p>
				</li>
				<li>
					<p>
						+&nbsp;关注
					</p>
					<div>
						<div></div>
						<p>点击关注，不错过TA最新的演出消息哦~</p>
					</div>
				</li>
			</ul>
		</div>
		<!-- 演出 -->
		<div class="celebrity-content1">
			<p>
				薛之谦&nbsp;参加的演出
			</p>
			<div>
				<div>
					<img src="./img/celebrity-img1.png" alt="">
				</div>
				<div>
					<p>薛之谦“天外来物”巡回演唱会-苏州站</p>
					<p>2021.10.24 19:30 周日</p>
					<p>苏州</p>
					<p>
						<span class="one-sale">
							售票中
						</span>
					</p>
				</div>
			</div>
			<div>
				<div>
					<img src="./img/celebrity-img2.png" alt="">
				</div>
				<div>
					<p>水母烟花音乐节</p>
					<p>2021.10.2 - 2021.10.3 </p>
					<p>儋州 </p>
					<p>
						<span class="two-delay">
							演出延迟
						</span>
					</p>
				</div>
			</div>
			<div>
				<div>
					<img src="./img/celebrity-img3.png" alt="">
				</div>
				<div>
					<p>【项目延期】2021杭州兔子山下音乐节</p>
					<p>2021.5.1 - 2021.5.2</p>
					<p>杭州</p>
					<p>
						<span class="two-delay">
							演出延迟
						</span>
					</p>
				</div>
			</div>
		</div>
		<!-- 现场回顾 -->
		<div class="celebrity-content2">
			<p>
				精彩现场回顾&nbsp;
			</p>
			<div>
				<p>嗨翻 ！十一来Forever Young海口音乐节</p>
				<video data-v-4c7f1e61="" src="https://show.pipi.cn/d40b6705vodtranscq1400253219/5ef1fd1a5285890807937427953/v.f54391.mp4" poster="https://img.meituan.net/kylisean/38bf8f7680eaa373a2272268c0cde25f1196381.png" preload="none" controls="controls" controlslist="nofullscreen nodownload" playsinline="true" webkit-playsinline="true" width="100%" height="auto" data-id="557" class="play-one"></video>
				<div>
					<img src="./img/celebrity-miaomiao.png" alt="">
					<span>喵眼前排观众</span>
				</div>
			</div>
			<div>
				<p>薛之谦《我好像在哪见过你》，在舒缓的旋律中浮想联翩！</p>
				<video data-v-4c7f1e61="" src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/875dd1535285890807924264690/v.f42905.mp4" poster="https://p1.meituan.net/movie/eb04c159a1e9e3633892f97e59bfb34c25821.jpg" preload="none" controls="controls" controlslist="nofullscreen nodownload" playsinline="true" webkit-playsinline="true" width="100%" height="auto" data-id="558" class="play-one"></video>
				<div>
					<img src="./img/celebrity-miaomiao.png" alt="">
					<span>小喵在现场</span>
				</div>
			</div>
			<div>
				<p>薛之谦：别人开演唱会，我开的是《动物世界》</p>
				<video data-v-4c7f1e61="" src="https://vod.pipi.cn/43903a81vodtransgzp1251246104/950728185285890801789433469/v.f42905.mp4" poster="https://p0.meituan.net/moviemachine/6d19d64a380388ee593fd7b02381a71e216919.png" preload="none" controls="controls" controlslist="nofullscreen nodownload" playsinline="true" webkit-playsinline="true" width="100%" height="auto" data-id="559" class="play-one"></video>
				<div>
					<img src="./img/celebrity-miaomiao.png" alt="">
					<span>小喵在现场</span>
				</div>
			</div>
			<div>
				<p>薛之谦新歌《病态》mv上线，百人水中共舞</p>
				<video data-v-4c7f1e61="" src="https://maoyan.meituan.net/movie/videos/679413ee93794834b7382a2b93246db3.mp4" poster="https://p0.meituan.net/movie/080a238c932bb112496e910ed8e17372103674.jpg" preload="none" controls="controls" controlslist="nofullscreen nodownload" playsinline="true" webkit-playsinline="true" width="100%" height="auto" data-id="560" class="play-one"></video>
				<div>
					<img src="./img/celebrity-miaomiao.png" alt="">
					<span>小喵在现场</span>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="celebrity-bottom">
			<ul>
				<li>
					<img src="./img/celebrity-title1.png" alt="">
				</li>
				<li>
					<p>点击关注，不错过TA</p>
					<p>最新的演出消息哦～</p>
				</li>
				<li>
					<p>
						+ 关注
					</p>
				</li>
			</ul>
		</div>
</body>
<script>
	// 在iphone6 375宽度中  html是以16px作为基本单位
	(function () {
		function w() {
			var all = document.documentElement;  // 获取html元素
			var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
			console.log(123, test)
			if (test > 750) {
				test = 750;
			}
			rem = test / 23.4375;
			console.log(rem)
			all.style.fontSize = rem + 'px'
		}
		w();
		window.addEventListener("resize", function () {
			w()
		}, false)
	})();
</script>

</html>